Review: Create mockups for a website
複習：為網站建立模型圖

Mockup（高保真模型） 是靜態的、視覺精緻的設計圖，用來展示產品最終外觀。它比線框圖更詳細，但比高保真原型更輕量。

建立網頁 Mockup 的步驟

1. 開啟你的 Figma 專案和低保真線框圖

• 保持 wireframe 可見，方便參考。

• 可以選擇複製一個 wireframe 來作為 Mockup 的藍本。

2. 新建一個適當尺寸的 Frame（畫布）

• 使用「Frame Tool」（快捷鍵：F）

• 推薦尺寸：1440×1024px，可以根據需要調整高度（適應滾動頁）

• 其他常用桌面尺寸：1920×1080, 1366×768, 1536×864

3. 新增設計元素（可以從頂部往下開始）

導航欄、Logo、按鈕等基礎元素

• 使用「Rectangle」「Line」「Text」等工具

• 設定顏色、邊框、字型等細節

• 可以從之前建立的 Sticker Sheet 複製元件過來

新增圖片（如 Hero Image）

1. 畫出一個矩形（Rectangle）

2. 拖入圖片自動填充

3. 調整大小、裁剪位置

新增文字

• 網站標題、副標題、介紹文字等

• 注意字型層級（Heading 1、2、正文）

• 可用 Lorem Ipsum 佔位

使用 Styles 和 Components 統一風格

• 將常用的按鈕、顏色、字型儲存為樣式

• 建立可複用元件（如按鈕、卡片、圖示）

4. 構建頁面剩餘部分（下拉內容）

使用以下技巧新增內容：

• 用橢圓、矩形新增圖示和圖片容器

• 使用內容卡片展示商品或分類

• 拖動圖片進入圖形中進行填充

• 使用統一元件快速新增導航和底部（Footer）

5. 為網站其他頁面重複此流程

• 新建 Frame → 新增元素 → 使用元件 → 插入圖片和文字

• 保持風格一致（統一字型、色彩、按鈕風格）

自檢問題（對比你的設計）

1. 我有沒有看線框圖？有沒有做得更好？

2. Mockup 的大小設定對了嗎？

3. 導航欄、文字、圖片、圖示這些重要內容都加上了嗎？

4. 我有沒有用元件和樣式讓整個設計看起來統一？

5. 其他頁面的 Mockup 都做完了嗎？

6. 手機版和電腦版都設計了嗎？